<template>
  <div>
    <div id="main" style=" width: 100%;height: 700px"></div>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import {onMounted, onUnmounted, ref} from "vue";
import { getChart } from '/@/api/tb/tbChart'
 import { ElMessage } from 'element-plus';
let data_name=ref<any>([])
let data_value = ref<any>([])
onMounted(() => {
    type EChartsOption = echarts.EChartsOption;
    var chartDom = document.getElementById('main')!;
    var myChart = echarts.init(chartDom,'light');
    var option: EChartsOption;
    const getData = async() => {
      const res = await getChart();
      if (res.data) {
          for (const obj of res.data) {
          data_name.value.push(obj["order_status"]);
          data_value.value.push(obj["count_num"]);
       }
        } else {
          ElMessage.error("失败，没有数据！");
        }
    option = {
         title:{
          text:"订单状态数量总览",
          textStyle:{
            color:"black",
            fontSize: 24,
          },
          left: 'center'
         },
         tooltip: {
         trigger: 'axis',
         axisPointer: {
           type: 'shadow'
         }
       },
       grid: {
         left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
       },
       xAxis: [
         {
           type: 'category',
           name: '',
           data: data_name.value,
           nameTextStyle:{
            fontSize:16,
           },
           axisTick: {
             alignWithLabel: true
           },
           axisLabel: {
              // 轴文字
              show:true,
              color: "#268C8C",
              fontSize: 12,
              interval: 0,
              // rotate: 45
            },
            axisLine: {
              // 轴线
              show: true,
            },
         }
       ],
       yAxis: [
         {
           type: 'value',
           name: '订单个数',
          //  min: 0,  // 设置y轴最小值  
          //  max: 20,  // 设置y轴最大值 
           nameTextStyle:{
            fontSize:16,
           },
           axisLabel: {
            formatter: '{value}个',
            color: "#268C8C",
              fontSize: 12,
            },
         }
       ],
       series: [
         {
           name: '个数',
           type: 'bar',
           barWidth: '90%',
           data: data_value.value,
           showBackground: true,
           backgroundStyle: {
           color: 'rgba(220, 220, 220, 0.8)'
              },
         }
       ]
     };
      option && myChart.setOption(option);
  }; 
  getData()
  window.onresize = function () {
        myChart.resize();
      };
     }
);
 onUnmounted(() => {
      echarts.dispose;
    });
</script>
